<template>
    <div class="app">
            <div
                class="level-space"
                v-if="!$util.isEmpty(stage)">
                <div class="pross">
                    <div class="bar">
                        <div class="now_box">
                            <div class="now" :style="{width:progressWidth +'%'}"></div>
                        </div>
                        <div class="ball_box">
                            <div class="dot">
                                <div :class="['ball',item.status?'orange':'']"  v-for="(item,index) in stage" :key="index"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tipbar">
                        <i :class="[item.status?'orange':'']" v-for="(item,index) in stage" :key="index">
                            {{item.name}}
                        </i>
                    </div>
                </div>
            </div>
            <div class="live-list_box">
                <template v-if="!$util.isEmpty(list.data)">
                    <div
                        class="live-list_item"
                        v-for="(item, index) in list.data"
                        :key="index"
                        >
                        <div class="live-head_box">
                            <div class="live-head_img">
                                <img class="head-img" :src="item.relation_id_info.user_picture" alt="">
                            </div>
                            <div class="live-head_name">
                                <div class="name">{{item.relation_id_info.nick_name}}</div>
                                <div class="position">{{item.relation_id_info.role_name}}</div>
                            </div>
                            <div class="live-head_right" >
                                <span @click="compile(item)" v-if="detail.is_my != 0">编辑</span>
                            </div>
                        </div>
                        <div class="live-content_dec">
                            {{item.content}}
                        </div>
                        <div class="live-content-img">
                            <img
                                v-for="(i,idx) in item.img_list"
                                @click="preview(item.img_list,idx)"
                                :src="i"
                                alt=""
                                :key="idx"
                                >
                        </div>
                        <div class="live-bottom_open">
                            <div class="live_time">{{item.publish_time}}</div>
                            <div class="live-right_open">
                                <i :class="['iconfont','icondianzan',item.is_praise==0?'':'beenPraise']" @click="give(item)">
                                    <span>{{item.report_asset_info?item.report_asset_info.praise_num:0}}</span>
                                </i>
                                <i class="iconfont iconfenxiang" @click="sharePoter(item.report_asset_info)">
                                    <span>{{item.report_asset_info?item.report_asset_info.share_num:0}}</span>
                                </i>
                            </div>
                        </div>
                    </div>
                 </template>
                <AppWrapperEmpty
               type="noData"
               :finished="list.finished"
                :is-loading="list.loading"
                title="无数据"
                :is-empty="$util.isEmpty(list.data)"
            />
            </div>
             <!-- 编辑 -->
            <uniPop type="bottom" ref="setShow" maxHeight="100vh" width="100%" >
               <div class="live-compile_box">
                   <div class="live-compile_item" @click="stick">置顶</div>
                   <div class="live-compile_item" @click="edit">修改</div>
                   <!-- <div class="live-compile_item">隐藏</div> -->
                   <div class="live-compile_item" @click="dele">删除</div>
                   <div class="live-compile_item" @click="cancel">取消</div>
               </div>
            </uniPop>
    </div>
</template>

<script>
import uniPop from '@/components/uni-popup/uni-popup'
import { getSiteReport, praiseReport, cancelPraiseReport, delReport, topReport } from '@/api/constructionSite/index'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
export default {
	name: 'live',
	components: {
		uniPop,
		AppWrapperEmpty
	},
	inject: ['queryData'],
	mixins: [list],
	props: {
		detail: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			stage: [],
			query: {},
			current_stage: null,
			currentSelectLive: null
		}
	},
	computed: {
		progressWidth() {
			if (!this.$util.isEmpty(this.stage)) {
				let stateIndex = this.stage.findIndex(i => i.id == this.current_stage)
				return parseInt((+stateIndex / (this.stage.length - 1)) * 100)
			}
			return 0
		}
	},
	mounted() {
		this.query = this.queryData()
		this.init()
	},
	methods: {
		preview(imgArr, index) {
			uni.previewImage({
				current: index,
				urls: imgArr,
				loop: true
			})
		},
		init() {
			return getSiteReport({
				id: this.query.id,
				page: this.list.page,
				page_size: this.list.limit
			})
				.then(res => {
					this.completes(res)
					if (res.status === 'success') {
						if (this.current_stage != res.data.current_stage) {
							let stateIndex = res.data.stage.findIndex(i => i.id == res.data.current_stage)
							this.stage = res.data.stage.map((i, index) => ({
								...i,
								status: !(index > stateIndex)
							}))
							this.current_stage = res.data.current_stage
						}
					}
				})
		}, // 置顶
		stick() {
			topReport({
				id: this.currentSelectLive.report_asset_info.report_info_id
			}).then(res => {
				this.$refs.setShow.close()
				this.resetList()
				this.init()
			})
		},
		compile(val) {
			this.currentSelectLive = val
			this.$refs.setShow.open()
		},
		cancel() {
			this.currentSelectLive = null
			this.$refs.setShow.close()
		},
		cancelPraiseReport(item) {
			cancelPraiseReport({
				id: item.report_asset_info.id
			}).then(res => {
				item.report_asset_info.praise_num -= 1
				item.is_praise = 0
			})
		},
		praiseReport(item) {
			praiseReport({
			    id: item.report_asset_info.id
			}).then(res => {
				item.report_asset_info.praise_num += 1
				item.is_praise = 1
			})
		},
		give(item) {
			if (item.is_praise == 0) {
				this.praiseReport(item)
			} else {
				this.cancelPraiseReport(item)
			}
		},
		sharePoter(item) {
			this.$parent.shareBtnFn(item)
		},
		edit() {
			this.$refs.setShow.close()
			let query = {
				liveId: this.currentSelectLive.id,
				id: this.detail.site_id,
				site_info_id: this.detail.site_info_id,
				current_stage_group_id: this.detail.current_stage_group_id,
				current_stage_id: this.detail.current_stage_id,
				is_my: this.detail.is_my,
				editStatus: 'edit'
			}
			uni.navigateTo({
				url: `/pages/constructionSite/update${this.commonJS.queryData(query)}`
			})
		},
		dele() {
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗?',
				success: (res) => {
					if (res.confirm) {
						delReport({
							id: this.currentSelectLive.report_asset_info.report_info_id
						}).then(res => {
							this.$refs.setShow.close()
							this.resetList()
							this.init()
						})
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		}
	}

}
</script>

<style lang="scss" scoped>
     .beenPraise {
         color: #FF6900;
     }
     .level-space{
            display: flex;
            align-items:center;
            flex-direction:column;
            padding: 40px 0;
            border-bottom: 1px solid #DDDDDD;
	    .pross{
            .bar{
                    position: relative;
                    width: 660px;
                    height: 3px;
                    background-color:#CCCCCC;
                    border-radius: 8px;
                    box-sizing:border-box;
                    .now_box{
                        position: relative;
                        height: 100%;
                            .now{
                            position: absolute;
                            left:0px;
                            top:50%;
                            height: 3px;
                            transition:all .5s linear;
                            background-color:#FF6900;
                            transform: translate(0,-50%);
                            border-radius:3px;
                        }
                    }
                    & .ball_box {
                        position: absolute;
                        width: 100%;
						z-index:99;
						top:50%;
                        transform: translate(0, -50%);
                        & .dot{
                            display: flex;
						    color:white;
                            justify-content: space-between;
                        }
                        & .ball {
                            width:20px;
                            height:20px;
                            background:#CCCCCC;
                            border-radius:50%;
                            &.orange{
                               background: #FF6900;
                            }
                        }
                    }
                }
                .tipbar{
                    display: flex;
                    margin-top: 17px;
                    color:#CCCCCC;
					font-size: 24px;
                    justify-content: space-between;
                    i {
                        // flex:1;
                        // text-align: left;
                        &:last-child{
                            // flex:0;
                            // display: inline-block;
                            // text-align: right;
                        }
                        &.orange {
                            color: #FF6900;
                        }
                    }
                }
            }
       }
       .live-list_box {
           padding-left: 30px;
           padding-bottom: 100px;
           & .live-list_item{
               padding: 30px 0;
               border-bottom: 1px solid #EEEEEE;
               & .live-head_box {
                   display: flex;
                   align-items: center;
                   & .live-head_img {
                       & .head-img {
                           width:66px;
                            height:66px;
                            border-radius:50%;
                       }
                   }
                   & .live-head_name {
                       margin-left: 14px;
                       & .name {
                            color: #333333;
                            font-weight:600;
                            font-size:28px;
                            margin-bottom: 10px;
                       }
                       & .position {
                           color: #999999;
                           font-size:24px;
                           font-weight:400;
                       }
                   }
                   & .live-head_right {
                       flex: 1;
                       color: #FF6900;
                       font-size: 28px;
                       font-weight: 400;
                       text-align: right;
                       padding-right: 28px;
                   }
            }
           & .live-content_dec {
              color: #333333;
              padding: 30px 100px 30px 80px;
              line-height:42px;
              word-wrap:break-word;
           }
           & .live-content-img {
               padding:0 80px;
               margin-bottom: 10px;
               display: flex;
               flex-wrap: wrap;
               & img {
                   width: 150px;
                   height: 150px;
                   margin: 10px;
                   margin-left: 0px;
                   box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
               }
           }
           & .live-bottom_open {
               padding-left: 80px;
               display: flex;
               align-items: center;
               & .live_time {
                   color: #999999;
                   font-size:24px;
                   font-weight:400;
               }
               & .live-right_open {
                   flex: 1;
                   text-align: right;
                   color: #999999;
                   & .iconfont {
                     font-size: 26px;
                     margin: 0 25px;
                     & span {
                        margin-left: 8px;
                     }
                   }
               }
           }
           }

       }
       .live-compile_box {
           background-color: #f5f5f5f5;
           & .live-compile_item {
               background-color: #FFFFFF;
               width: 100%;
               height: 90px;
               line-height: 89px;
               text-align: center;
               border-bottom: 1px solid #EEEEEE;
               font-size: 28px;
               &:last-child{
                   margin-top: 10px;
               }
           }
       }
</style>
